<!DOCTYPE html>
<html>
<head>
<title>Pure CSS3 DTE Logo</title>
<style type="text/css">

/*
Pure CSS3 DTE Logo by Taufik Nurrohman
On: 1 December 2011
URL: http://hompimpaalaihumgambreng.blogspot.com/
Note: These experiments are under the God Almighty License.
Please do not replace or remove the attribution above if you want to save/modify this project legally.
*/

*{
margin:0px;
padding:0px;
-webkit-transition:all 0.26s ease-out;
-moz-transition:all 0.26s ease-out;
-ms-transition:all 0.26s ease-out;
-o-transition:all 0.26s ease-out;
transition:all 0.26s ease-out;
}

body{background:#333;}

h2.judul{
position:relative;
left:20px;
width:560px;
margin:80px auto 0px;
font:bold 40px 'Courier MS',Monospace;
text-shadow:0 0 1px rgba(0,0,0,0.4);
color:#666;
}
h2.judul:after{
content:"DTE - Dora The Exploder";
dispay:block;
position:absolute;
top:100%;
margin-top:0px;
left:0px;
text-shadow:none;
-webkittransform:scale(1, -1);
-moz-transform:scale(1, -1);
-ms-transform:scale(1, -1);
-o-transform:scale(1, -1);
transform:scale(1, -1);
}
h2.judul:before{
content:"";
position:absolute;
width:560px;
height:50px;
top:100%;
left:0px;
display:block;
z-index:2;
background:-webkit-linear-gradient(top, rgba(255,255,255,0.5), #fff);
background:-moz-linear-gradient(top, rgba(255,255,255,0.5), #fff);
background:-ms-linear-gradient(top, rgba(255,255,255,0.5), #fff);
background:-o-linear-gradient(top, rgba(255,255,255,0.5), #fff);
background:linear-gradient(top, rgba(255,255,255,0.5), #fff);
}

a.credit{
position:fixed;
right:20px;
bottom:10px;
z-index:200;
font:bold 16px Calibri,Arial,Sans-Serif;
color:#ccc;
text-decoration:none;
cursor:pointer;
}
a.credit:hover{
color:#39B1D9;
}

#dte{
position:relative;
width:20px;
height:20px;
left:2px;
margin:100px auto 0;
}

.dte-box1{
width:18px;
height:22px;
background:#999;
-webkit-box-shadow:0 1px 5px rgba(0,0,0,0.7);
-moz-box-shadow:0 1px 5px rgba(0,0,0,0.7);
box-shadow:0 1px 5px rgba(0,0,0,0.7);
}
.dte-mid{
width:18px;
height:18px;
background:#000;
border-left:2px solid #999;
border-right:2px solid #999;
position:absolute;
top:2px;
left:-2px;
-webkit-box-shadow:0 1px 5px rgba(0,0,0,0.7);
-moz-box-shadow:0 1px 5px rgba(0,0,0,0.7);
box-shadow:0 1px 5px rgba(0,0,0,0.7);
}
.tn1{
position:absolute;
width:10px;
height:4px;
top:10px;
left:2px;
background:transparent;
border-left:2px solid #999;
border-right:2px solid #999;
}
.tn2{
position:absolute;
width:6px;
height:2px;
background:transparent;
border-left:2px solid #999;
border-right:2px solid #999;
top:6px;
left:4px;
}
.tn2.bot{
bottom:4px;
top:auto;
}
.hor{
position:absolute;
width:6px;
height:2px;
background:#999;
left:6px;
bottom:2px;
}

#glass{
position:absolute;
top:0px;
left:-2px;
z-index:100;
width:22px;
height:12px;
background:-webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.35));
background:-moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.35));
background:-ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.35));
background:-o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.35));
background:linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.35));
-webkit-border-radius:70px / 30px;
-moz-border-radius:70px / 30px;
border-radius:70px / 30px;
}

</style>
</head>
<body>

<div id="dte">
<div class="dte-box1">
	<div class="dte-mid"></div>
	<div class="tn1"></div>
	<div class="tn2"></div>
	<div class="tn2 bot"></div>
	<div class="hor"></div>
	<div id="glass"></div>
</div>
</div>
<h2 class="judul">DTE - Dora The Exploder</h2>
<a class="credit" href="http://hompimpaalaihumgambreng.blogspot.com">Logo and CSS3 Experiments are Copyrighted to Taufik Nurrohman</a>

</body>
</html>